<template>
	<div class="vote-set"> 
        <div class="list">
            <div class="switch-title">
                <el-radio class="radio" v-model="radioVal" label="1">自定义投票项</el-radio>
                <!--<el-radio class="radio" v-model="radioVal" label="2">关联报名添加投票项</el-radio>-->
            </div>
            <div v-if="radioVal==1" class="content-self">
                <div class="add-vote-item">
                    <el-button  @click="openDialog">+添加投票项</el-button>
                </div>
                <div class="vote-tab-pane">
                    <el-tabs v-model="$store.state.voteTabs" type="card" @tab-click="voteTabsClick">
                        <el-tab-pane :label="list.name" :name="list.group_id" v-for="(list,b) in tabs" :key="list.group_id">
                            <div style="width: 100%">
                                <el-table
                                    ref="multipleTable"
                                    :data="list.tableData"
                                    border
                                    tooltip-effect="dark"
                                    
                                    @selection-change="handleSelectionChange"
                                    :default-sort = "{prop: 'address', order: 'descending'}">
                                    <el-table-column
                                    type="selection"
                                    width="40">
                                    </el-table-column>
                                    
                                    <el-table-column
                                        prop="code"
                                        label="编号"
                                        width="90"
                                        sortable>
                                    </el-table-column>
                                    <el-table-column
                                        width="100"
                                        label="投票内容" >
                                        <template slot-scope="scope">
                                            <img style="width:20px;height:20px;border:0;" :src="scope.row.cover_url" v-show="scope.row.cover_url"> 
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                        prop="title"
                                        label="名称">
                                    </el-table-column>
                                    <el-table-column
                                        prop="group_title"
                                        label="组名">
                                    </el-table-column>
                                    <el-table-column
                                        prop="weight"
                                        label="权重"
                                        width="90"
                                        sortable
                                        >
                                    </el-table-column>
                                    <el-table-column
                                        prop="status"
                                        label="状态"
                                        width="90"
                                        sortable 
                                        :formatter="formatStatus" >
                                    </el-table-column>
                                    <el-table-column label="操作 " width="100" align="center">
                                        <template slot-scope="scope">
                                            <el-button  @click="editClick(scope.row)" type="text" size="small">编辑</el-button> 
                                            <el-button   @click="showDelete(scope.row,'one')" type="text" size="small">删除</el-button><br/>
                                            <el-button     @click="lookDetail(scope.row)"type="text" size="small">查看</el-button> 
                                            <el-button   v-if="scope.row.status==0"  @click="changeState(scope.row,1)"type="text" size="small">下架</el-button> 
                                            <el-button   v-else  @click="changeState(scope.row,0)"type="text" size="small">上架</el-button> 
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div> 
                            <div class="delete-div">
                                <el-button v-show="list.tableData.length!=0"  @click="showDelete('','all')" type="" size="small">批量删除</el-button>  
                            </div> 
                        </el-tab-pane> 
                    </el-tabs>

                </div>
                
            </div>
            <!--报名关联-->
            <!--<div v-else>
                
            </div>-->
        </div>

        <el-dialog
            title="添加选项"
            :visible.sync="addDialog"
            size="small"   
            >
            <div class="add-options" v-loading="loadingChoose" element-loading-text="上传中...">

                <div class="form-item-box clearfix">
                    <div class="form-item-left require-item">名称：</div>
                    <div class="form-item-right">
                        <el-input class="input" v-model="form.actorName" placeholder="投票项名称，最多支持10个字 " :maxlength="10"></el-input>
                    </div>
                </div> 
                <div class="form-item-box clearfix">
                    <div class="form-item-left require-item">组别：</div>
                    <div style="width:0;height:0;">{{shortNum}}</div>
                    <div class="form-item-right">
                        <el-select v-model="form.actorGroup" placeholder="选择活动" class="float-left item-select">
                            <el-option
                                v-for="item in options"
                                :key="item.group_id"
                                :label="item.title"
                                :value="item.group_id"
                                @click.native="selectChange(item)">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="form-item-box clearfix">
                    <div class="form-item-left require-item">权重：</div>
                    <div class="form-item-right">
                        <el-input class="input" ref="weightInput" v-model="form.weight" type="number"></el-input>
                    </div>
                </div>


                <div class="form-item-box clearfix">
                    <div class="form-item-left require-item">缩略图：</div>
                    <div class="form-item-right">
                       <div style="display:inline-block; vertical-align: middle;">
                            <div class="upload-img-list">
                                <p  v-show="!form.actorBackgroundImg" >
                                    <input type="file" 
                                        @change='addImgEvent'
                                        accept="image/png, image/jpeg, image/jpg"
                                        v-show="!ImportLoading"> 
                                    <img v-show="ImportLoading" class="load-gif" src="./../../../assets/img/qr_code.gif">
                                </p>
                                <p v-show="form.actorBackgroundImg" class="p_img">
                                    <img :src="form.actorBackgroundImg" />
                                    <i class="fa fa-times" 
                                    aria-hidden="true"
                                    v-show="form.actorBackgroundImg"  @click="cancelBanner()"></i>
                                </p>
                            </div>
                            <p style="font-size:12px;">*选择展示类型为照片时，使用选项缩略图。小于200KB</p>
                        </div>
                    </div>
                </div>

                <div class="form-item-box clearfix">
                    <div class="form-item-left require-item">状态：</div>
                    <div class="form-item-right">
                       <el-radio-group v-model="form.status">
                            <el-radio label="0">上架</el-radio>
                            <el-radio label="1" >下架</el-radio>
                        </el-radio-group>
                    </div>
                </div>

                <div class="form-item-box clearfix">
                    <div class="form-item-left require-item">展示类型：</div>
                    <div class="form-item-right">
                       <el-radio-group v-model="form.actorType">
                            <el-radio label="1">照片</el-radio>
                            <el-radio label="2" >音频</el-radio>
                            <el-radio label="3" >视频</el-radio> 
                        </el-radio-group>
                    </div>
                </div>
                
                <div class="form-item-box clearfix" v-show="form.actorType==3">
                    <div class="form-item-left require-item">视频素材：</div>
                    <div class="form-item-right">
                        <el-input class="element-input" disabled placeholder="请选择文件" v-model="form.actorVideo">
                            <label id="file" slot="append" class="file-label cursor" @click="clickIndex(1)">
                                <input type="file" name="file" @change='addFilePay' ref="couponFile" class="up-file-input"/> 
                                <el-button>选择视频</el-button>
                            </label> 
                        </el-input>
                    </div>
                </div>

                <div class="form-item-box clearfix" v-show="form.actorType==2">
                    <div class="form-item-left require-item">音频素材：</div>
                    <div class="form-item-right">
                        <el-input class="element-input" disabled placeholder="请选择文件" v-model="form.actorAudio">
                            <label id="file" slot="append" class="file-label cursor" @click="clickIndex(2)">
                                <input type="file" name="file" @change='addFilePay' ref="couponFile" class="up-file-input"/> 
                                <el-button >选择音频</el-button>
                            </label> 
                        </el-input>
                    </div>
                </div>

                <div class="form-item-box clearfix">
                    <div class="form-item-left require-item">描述：</div>
                    <div class="form-item-right">
                        <el-input class="input" v-model="form.actorDescription" placeholder="投票项描述，最多支持20个字 " :maxlength="20"></el-input>
                    </div>
                </div>
                <div class="form-item-box clearfix">
                    <div class="form-item-left require-item">介绍：</div>
                    <div class="form-item-right rule-box">
                        <quill-editor 
                            v-model="form.actorIntroduce"
                            ref="myQuillEditor"
                            class="editer"
                            :options="editorOption"
                            @ready="onEditorReady($event)">
                        </quill-editor>
                    </div>
                </div>



            </div>  
            <span slot="footer" class="dialog-footer">
                <el-button @click="addDialog = false">取 消</el-button>
                <el-button type="primary" @click="subInfo">保 存</el-button>
            </span>
        </el-dialog>

        <el-dialog
        title="提示"
        :visible.sync="showDetail"
        size="small" >
            <div>
                <div class="form-item-box clearfix">
                    <div class="form-item-left require-item">名称：</div>
                    <div class="form-item-right">
                        {{detailForm.actorName}}
                    </div>
                </div>
                <div class="form-item-box clearfix">
                    <div class="form-item-left require-item">组别：</div>
                    <div class="form-item-right">
                        {{detailForm.actorGroup}}
                    </div>
                </div>
                <div class="form-item-box clearfix">
                    <div class="form-item-left require-item">缩略图：</div>
                    <div class="form-item-right">
                        <div class="vote-view-smimg">
                            <img :src="detailForm.actorBackgroundImg" >
                        </div>
                    </div>
                </div>
                <div class="form-item-box clearfix">
                    <div class="form-item-left require-item">描述：</div>
                    <div class="form-item-right">
                        {{detailForm.actorDescription}}
                    </div>
                </div>
                <div class="form-item-box clearfix">
                    <div class="form-item-left require-item">详细介绍：</div>
                    <div class="form-item-right" v-html="detailForm.actorIntroduce"> 
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showDetail = false">返 回</el-button>
            </span>
        </el-dialog>

    </div>
</template>
<script>
    import { quillEditor } from 'vue-quill-editor'
	import { baseImgPath } from './../../../config/env'
	import * as api from './../../../api/api';
	import Vue from 'vue'
	import { Message,Loading} from 'element-ui';    
	export default {
        props:{
            candidateProps:{
                type:String,
                default:'edit'
            }
        },
		data(){
			return {
                loadingChoose:false, 
                showDetail:false,
                ImportLoading:false, //上传图片
                addDialog:false, //添加选项
                radioVal:'1',  //自定义投票项
                // voteTabs:'0',
                editorOption: {
			        
		        },
                multipleSelection: [],

                // options:this.$store.state.groupData,
                form:{
                    actorName:'',   //名称
                    actorGroup:'', //组别
                    weight:'0', //权重
                    activity_id:'', //grop接口的id
                    actorBackgroundImg:'',//资源路径
                    status:'0',//上下架
                    actorType:'1',//资源类型
                    actorVideo:'',//视频
                    actorAudio:'',//音频
                    actorVideoId:'',//视频
                    actorAudioId:'',//音频
                    actorDescription:'',//	描述
                    actorIntroduce:'',// 介绍  
                    id:'',
                },
                detailForm:{
                    actorName:'',
                    actorGroup:'',
                    actorBackgroundImg:'',
                    actorDescription:'',
                    actorIntroduce:'',// 介绍
                },
                shortNum:0,
                upFileIndex:null,
            }
		},
        watch:{
            tabs(a,b){
                this.getCandidate();
            },
        },
		computed: {
            options(){
                if(this.$store.state.groupData.length==0){
                    let arr=[];
                    arr[0]={
                        title:'暂未添加分组',
                        group_id:'0'
                    }
                    return arr;
                }else{
                    return this.$store.state.groupData;
                }
            },
            tabs(){
                let arr=[{
                        name:'全部',
                        group_id:'0',
                        tableData: []
                    }];
                if(this.$store.state.groupData.length==0){ 
                    return arr;
                }else {
                    let b=[];
                    b.push(arr[0]);
                    this.$store.state.groupData.forEach((item,index)=>{
                        if(item.title){
                           let obj={
                                name:item.title,
                                group_id:item.group_id,
                                tableData: []
                            }
                            b.push(obj);          
                        } 
                    });
                    return b;
                }
            },
            editor() {
	        	return this.$refs.myQuillEditor.quill;
	      	}, 
            
        },
        components: {
			quillEditor
		}, 
		mounted(){
           if(this.candidateProps=='edit'){
                this.getCandidate();
           }
           console.log(this.candidateProps); 
		},  
        methods: { 
            selectChange(val){ 
                this.shortNum++;
                // let vm = this;
                // vm.addDialog = false;
                // setTimeout(function(){
                //     vm.form.actorGroup=val.group_id; 
                //     vm.addDialog = true;
                // },2);
            },
            //保存投票项
            subInfo(){
                let vm = this;
                if(vm.regInfo()){ 
                    let body={
                        actorName:vm.form.actorName,   //名称
                        actorGroup:vm.form.actorGroup, //组别
                        weight:vm.form.weight, //权重
                        activity_id:vm.form.activity_id, //grop接口的id
                        actorBackgroundImg:vm.form.actorBackgroundImg,//资源路径
                        status:vm.form.status,//上下架
                        actorType:vm.form.actorType,//资源类型
                        actorVideo:vm.form.actorVideoId,//视频
                        actorAudio:vm.form.actorAudioId,//音频 
                        actorDescription:vm.form.actorDescription,//描述
                        actorIntroduce:vm.form.actorIntroduce,//介绍  
                        id:vm.form.id,
                    };
                    body.activity_id=vm.$store.state.groupActId;
                    if(vm.form.actorGroup=='暂未添加分组'){
                        body.actorGroup=0
                    } 
                    api.voteCandidate(vm.$store.state.groupActId,body).then(res=>{
                        if(res.data.code==0){
                            if(!vm.$store.state.groupActId){
                                vm.$store.state.groupActId=res.data.activity_id;
                            } 
                            vm.addDialog = false;
                            vm.$message({ message: '保存成功', type: 'success' });
                            vm.getCandidate();
                        }
                    })
                }
                
            },
            regInfo(){ 
				if(this.form.actorName==''){
					this.$message({showClose: true,message: '名称不能为空'});
					return false;
				}else if(this.form.actorGroup===''){
					this.$message({showClose: true,message: '请选择组别'});
					return false;
				}else if(this.form.weight===''){
					this.$message({showClose: true,message: '权重不能为空'});
					return false;
				}else if(this.form.actorBackgroundImg==''){
					this.$message({showClose: true,message: '缩略图不能为空'});
					return false;
				}else if(this.form.status==''){
					this.$message({showClose: true,message: '状态不能为空'});
					return false;
				}else if(this.form.actorType==''){
					this.$message({showClose: true,message: '展示类型不能为空'});
					return false;
				}else if(this.form.actorDescription==''){
					this.$message({showClose: true,message: '描述不能为空'});
					return false;
				}else if(this.form.actorIntroduce==''){
					this.$message({showClose: true,message: '介绍不能为空'});
					return false;
				}else{
					return true;
				}
            },
            //打开新建投票项
            openDialog(){
                this.addDialog = true;
                this.form={
                    actorName:'',   //名称 
                    weight:'0', //权重
                    activity_id:'', //grop接口的id
                    actorBackgroundImg:'',//资源路径
                    status:'0',//上下架
                    actorType:'1',//资源类型
                    actorVideo:'',//视频
                    actorAudio:'',//音频
                    actorVideoId:'',//视频
                    actorAudioId:'',//音频
                    actorDescription:'',//	描述
                    actorIntroduce:'',// 介绍
                    id:''
                };
                let tabsIndex=this.$store.state.voteTabs; 
                
                if(this.$store.state.groupData.length!=0&&tabsIndex==0){
                    let groupIndex=this.$store.state.groupData[0].group_id;
                    this.form.actorGroup=groupIndex; //组别 
                }else  {
                    this.form.actorGroup=tabsIndex; //组别 
                } 
                console.log(this.form.actorGroup);
            },
            onEditorReady(editor) {
		        // console.log('editor ready!', editor)
		    },
            handleSelectionChange(val) {
                // console.log(val);
                this.multipleSelection = val;
            }, 
            voteTabsClick(tab, event) { 
                // this.form.actorGroup=tab.name; 
                // console.log(this.form.actorGroup)
            },
            //投票项列表
            getCandidate(){
                let vm = this;
                let body={
                    activity_id:vm.$store.state.groupActId,
                    order:'asc-desc'
                };
                api.candidateList(body).then(res=>{ 
                    if(res.data.code==0){   
                        vm.$store.state.voteTabs='-1'; 
                        vm.tabs.forEach((a,b)=>{ 
                            a.tableData=[];
                            res.data.data.forEach((item,index)=>{ 
                                if(a.group_id&&vm.$store.state.groupData.length!=0){
                                    if(item.group_id==a.group_id){ 
                                        a.tableData.push(item);
                                    }
                                } 
                            }) 
                            setTimeout(function(){
                                vm.tabs[0].tableData=res.data.data;  
                            },10);   
                        }) 
                        setTimeout(function(){
                            vm.$store.state.voteTabs='0';
                        },100);   
                    }
                    
                });
            }, 
            formatStatus (row, column) {
                return row.status == 0?'上架':'下架';
            },
            //删除投票项
            showDelete(item,val){
                let vm = this; 
                 vm.$confirm('确定删除选中的投票项', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    if(val=='one'){
                        let body={
                            id:item.id,
                            deleted_at:'1'
                        };
                        api.voteDeleteItem(body).then(res=>{
                            if(res.data.code==0){
                                vm.getCandidate();
                                vm.$message({
                                    message: '删除成功',
                                    type: 'success'
                                }); 
                                
                            }
                        })
                    }else{
                        let arr=[];
                        vm.multipleSelection.forEach((a,index)=>{
                            arr.push(a.id);
                        });
                        let body={
                            id:JSON.stringify(arr)
                        };
                        api.voteDeleteAll(body).then(res=>{
                            if(res.data.code==0){
                                vm.getCandidate();
                                vm.$message({
                                    message: '删除成功',
                                    type: 'success'
                                }); 
                            }
                        })
                    }
                }).catch(() => {
                    
                });
                  
            },
            //编辑信息
            editClick(item){ 
                console.log(item); 
                this.addDialog=true;
                let groupTitle='';
                if((item.group_id!=0&&item.group_title==='无')||item.group_id==0){
                    groupTitle='暂未添加分组';    
                }else{
                    groupTitle=item.group_id; 
                }
                this.form={
                    actorName:item.title,   //名称
                    actorGroup:groupTitle, //组别
                    weight:item.weight, //权重
                    activity_id:item.activity_id, //grop接口的id
                    actorBackgroundImg:item.cover_url,//资源路径
                    status:item.status.toString(),//上下架
                    actorType:item.type.toString(),//资源类型 
                    actorDescription:item.description,//	描述
                    actorIntroduce:item.content,// 介绍 
                    id:item.id,
                };
                if(item.type==1){
                    this.form.actorVideo='';//视频
                    this.form.actorAudio='';//音频 
                }else if(item.type==2){
                    this.form.actorVideo='视频';//视频
                    this.form.actorVideoId=''//视频
                    this.form.actorAudio=item.resource_url[0];//音频
                    this.form.actorAudioId=item.resource_id//音频
                }else{ 
                    this.form.actorVideo=item.resource_url[0];//视频
                    this.form.actorVideoId=item.resource_id//视频
                    this.form.actorAudio='音频';//音频 
                    this.form.actorAudioId=''//音频
                }
            },
            //投票自定义项上下架
            changeState(item,val){
                let vm = this;
                let body={
                    id:item.id,
                    status:val
                };
                api.shelvesEdit(body).then(res=>{
                    if(res.data.code==0){
                        vm.getCandidate();
                            vm.$message({
                                message:val==0?'上架成功':'下架成功',
                                type: 'success'
                            }); 
                        }
                })
            },
            //查看详情
            lookDetail(item){
                this.showDetail=true;
                this.detailForm={
                    actorName:item.title,
                    actorGroup:item.group_title,
                    actorBackgroundImg:item.cover_url,
                    actorDescription:item.description,
                    actorIntroduce:item.content,// 介绍
                }
            },
            //删除选择的图片
			cancelBanner(){
                this.form.actorBackgroundImg= '';
			},
			//上传图片
			addImgEvent(event){
				var vm = this;
				vm.ImportLoading=true;
	            var img1 = event.target.files[0];
				//生成临时图片路径
                var temSrc = URL.createObjectURL(img1);
	            var size = img1.size/1024;
				if(size>200){
					vm.ImportLoading=false;
					vm.$message({
					showClose: true,
					type: 'error',
					message: '图片大小不能大于200KB'
					}); 
					return false;  
				}
				var _img = new Image();
        		_img.onload = function  () { 
        			var imgWidth = _img.width,
        				imgHeight = _img.height; 
					
					let formdata = new FormData();
					formdata.append('upfile', img1);
                    // formdata.append('file_id', img1);
                    api.tmpPloadImg(formdata).then(res => {
                        vm.$message({
                            message: '上传成功',
                            type: 'success'
                        }); 
                        vm.ImportLoading=false;
                        vm.form.actorBackgroundImg= res.data.result.url;
                    }).catch(err=>{
                        vm.httpStatusCode(err); 
                        vm.ImportLoading=false;
                    })   
					setTimeout(function  () {
			        	URL.revokeObjectURL(temSrc);
			        },100);
				}
				_img.src = temSrc;
                event.target.value='';
			},
            clickIndex(a){
                this.upFileIndex=a; 
            },
            //上传视频
            addFilePay(e){
                let vm = this; 
                let ext=e.target.value.toLowerCase().split('.').splice(-1);
                let form = new FormData();  
                let name=e.target.value.split('\\');
                form.append('upfile', e.target.files[0]);
                form.append('file_id', 0); 
                vm.loadingChoose=true;
                api.vmsUpload(form).then(res=>{
                    vm.loadingChoose=false;
                    if(res.data.code==200||res.data.code==0){
                        if(vm.upFileIndex==2){
                            vm.form.actorAudio=name[name.length-1]; 
                            vm.form.actorAudioId=res.data.id//音频
                            vm.form.actorVideoId=''//视频 
                        }else{
                            vm.form.actorVideo=name[name.length-1];
                            vm.form.actorVideoId=res.data.id//视频 
                            vm.form.actorAudioId=''//音频
                        }  
                        vm.shortNum++;
                        vm.$message({ message: '上传成功', type: 'success' });
                    }
                }).catch(err=>{
                    vm.loadingChoose=false;
                });	
                event.target.value='';
            },
            
        }
	}
</script>
<style lang="less" >
	/* 修改输入框样式 */
	.pick-date-box .el-input__inner{
		height: 34px;
		box-sizing: border-box;
		border-radius: 0;
		background-color: #f4f8fb;
	    color: #888;
	    border: 1px solid #efefef;
	    box-shadow: none;
	    font-size: 12px;
	    width: 100%;
        height: 34px;
        padding: 6px 12px;
        box-sizing: border-box;
	}
	.special-item .el-input__inner{
		height: 32px;
		box-sizing: border-box;
		border-radius: 0;
		background-color: #f4f8fb;
	    color: #888;
	    border: 1px solid #efefef;
	    box-shadow: none;
	    font-size: 12px;
	    width: 109px;
        padding: 6px 12px;
        box-sizing: border-box;
	}
	.special-item .el-date-editor i{
		display: none;
	}
	.special-item .el-select .el-input__inner{
		padding-right: 25px;
		width:130px;
	}
	.lotteryNum-box .el-input__inner{
		width:142px;
		box-sizing: border-box;
		border-radius: 0;
		height: 34px;
		font-size: 12px;
	    color: rgb(136, 136, 136);
	    border-color: rgb(239, 239, 239);
	    background-color: rgb(238, 238, 238);
	}
	.tag-box .el-input__inner{
		width:160px;
	}
	.tag-box .el-input{
	}
	.rule-box .ql-container{
		height: 300px;
		background: #f4f8fb;
	}
	.share-switch .el-switch{
		position: relative;
		top:-1px;
	}
	.rule-title .el-switch{
		top:-1px;
		left: 10px;
	}
	.el-switch__label span{
		color:rgba(0,0,0,0);
	}
    .vote-set{
        .el-table{
            table{
                width:100% !important;
            }
            .el-table__empty-block{
                width:100% !important;
            }
        }
    }
    
</style>
<style lang="less" scoped>
	@import '../../../style/setTemplate'; 
    .vote-set{
        .el-table { 
            font-size: 13px; 
        }
        .add-vote-item{
            margin:20px 10px; 
        }
        // .vote-tab-pane{
        //     padding:10px 20px;
        // }
        .vote-view-smimg{
            max-width: 320px;
            max-height: 240px;
            width: 200px;
            height: 129px;
            img{
                max-height: 100%;
            }
        }
        .delete-div{
            margin-top:20px;
        }
    }
    .form-item-left{
        font-size:14px;
        text-align:center;
    }
    .form-item-right{
        width:380px;
        min-height: 34px;
        line-height:34px;
        .input,.item-select{
            background-color: #f4f8fb;
            color: #888;
            box-shadow: none;
            font-size: 12px;
            width: 100%;
            height: 36px;
            box-sizing: border-box;
        } 
    }
    

     .upload-img-list p{
        width:100px;
        height: 100px;
        line-height: 98px;
        border: 1px solid #eeeeee;
        margin: 0 10px;
        text-align: center;
        font-size: 30px;
        color: #aaaaaa;
        position: relative; 
        .load-gif{
            position:absolute;
            top:35px;
            left:35px;
            width:25px;
            height:25px;
        }
    }
    .upload-img-list p:first-child{
        position: relative;
    }
    .upload-img-list p:first-child:before{
        content:'+';
    }
    .upload-img-list p input{
        cursor: pointer;
        display: block;
        opacity: 0;
        width:100%;
        height: 100%;
        position: absolute;
        top:0;
        left:0;
    }
    .upload-img-list p:not(:first-child){
        -webkit-background-size: contain;
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
    }
    .upload-img-list .p_img{
        position:relative;
        border:none; 
    }
    .upload-img-list p img{
        width:100%;
        height: 100%;
    }
    .upload-img-list .p_img .fa-times{
        position: absolute;
        top: 0 !important;
        right:-13px;
        font-size: 14px;
        color:#888888;
        cursor: pointer;
    }
    .upload-img-list .p_img .fa-times:hover{
        opacity: 0.8;
    }

    .file-label{
        display: inline-block;
        // height:30px;
        // width:88px;
        padding: 10px 0;
        position: relative;
    }
    .up-file-input{
        cursor: pointer;
        display: block;
        opacity: 0;
        width:100%;
        height: 100%;
        position: absolute;
        top:0;
        left:0;
    }
</style>